import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';

interface AreaChartProps {
  data: number[];
  categories: string[];
  title?: string;
  height?: number;
  color?: string;
}

const AreaChart: React.FC<AreaChartProps> = ({ 
  data, 
  categories, 
  title = '', 
  height = 350,
  color = '#6366f1'
}) => {
  const series = [{
    name: title || '数量',
    data: data
  }];

  const options: ApexOptions = {
    chart: {
      type: 'area',
      height,
      fontFamily: 'Inter, Noto Sans SC, sans-serif',
      toolbar: { show: false },
      animations: { enabled: true, speed: 800 }
    },
    dataLabels: { enabled: false },
    stroke: { curve: 'smooth', width: 2 },
    markers: { size: 4 },
    colors: [color],
    fill: {
      type: "gradient",
      gradient: { 
        shadeIntensity: 1, 
        opacityFrom: 0.7, 
        opacityTo: 0.2, 
        stops: [0, 90, 100] 
      }
    },
    xaxis: {
      categories,
      labels: { style: { fontSize: '12px' } }
    },
    yaxis: {
      title: { text: '触发次数' }
    },
    legend: {
      position: 'bottom',
      horizontalAlign: 'center',
      fontWeight: 500,
      offsetY: 5
    },
    tooltip: {
      x: { format: 'MM/dd' },
      y: {
        formatter: (val) => `${val} 次`
      }
    }
  };

  return (
    <ReactApexChart 
      options={options} 
      series={series} 
      type="area" 
      height={height} 
    />
  );
};

export default AreaChart; 